﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
%>
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<!-- Advanced Tables -->
						<div class="panel panel-default">
							<div class="panel-heading">行程信息列表</div>
							<div class="panel-body">
							  	<form class="form-horizontal">
							  		<div class="form-group">
							  			<label for="vehicleLicense" class="col-md-2 control-label">车牌号</label>
							  			<div class="col-md-2">
							  				<input type="text" class="form-control" id="vehicleLicense" placeholder="车牌号">
							  			</div>
							  		</div>
                                    <div class="form-group">
										<label for="startSignInTime" class="col-md-2 control-label">开始时间</label>
										<div class="col-md-2">
											<div class='input-group date' id='datetimepicker1'>
												<input type='text' class="form-control" id="startTime" name="startTime" placeholder="开始时间"/> 
													<span class="input-group-addon" style="cursor: pointer;"> 
													<span class="glyphicon glyphicon-calendar"></span>
												</span>
											</div>
										</div>
										<label for="endSignInTime" class="col-md-2 control-label">结束时间</label>
										<div class="col-md-2">
											<div class='input-group date' id='datetimepicker2'>
												<input type='text' class="form-control" id="endTime" name="endTime" placeholder="结束时间"/>
												<span class="input-group-addon"style="cursor: pointer;"> 
													<span class="glyphicon glyphicon-calendar"></span>
												</span>
											</div>
										</div>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	                                    <a type="search" onclick="load(1)" class="btn btn-primary">搜索</a>
                                    </div>
                                </form>
                                <div style="height:20px"></div>
								<div class="table-responsive">
									<table class="table table-striped table-bordered table-hover"
										id="dataTables-example">
										<thead>
											<tr>
												<th>序号</th>
												<th>车牌</th>
												<th>出发站</th>
												<th>行程开始时间</th>
												<th>目的地</th>
												<th>行程结束时间</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody id="tbody">
										</tbody>
									</table>
									<div style="float:right" id="page" class="tr"></div>
								</div>

							</div>
						</div>
						<!--End Advanced Tables -->
					</div>
				</div>
			</div>
		</div>
<script>
	$(document).ready(function() {
		var now = new Date();  
		var day = ("0" + now.getDate()).slice(-2);  
		var month = ("0" + (now.getMonth() + 1)).slice(-2);  
		var startTime = now.getFullYear()+"-"+(month)+"-"+(01) ;  
		var endDate = now.getFullYear()+"-"+(month)+"-"+(day) ;  
		
		$("#startTime").val(startTime);
		$("#endTime").val(endDate);
		
		//日期选择
	    var picker1 = $('#datetimepicker1').datetimepicker({  
	        format: 'YYYY-MM-DD',  
	        locale: moment.locale('zh-cn'),  
	        //minDate: '2016-7-1'  
	    });  
	    var picker2 = $('#datetimepicker2').datetimepicker({  
	        format: 'YYYY-MM-DD',  
	        locale: moment.locale('zh-cn')  
	    });
	    //动态设置最小值  
	    picker1.on('dp.change', function (e) {  
	        picker2.data('DateTimePicker').minDate(e.date);  
	    });  
	    //动态设置最大值  
	    picker2.on('dp.change', function (e) {  
	        picker1.data('DateTimePicker').maxDate(e.date);  
	    });  
		load(1);
	});
	function seeTripInfo(id) {
		openwindow("<%=path%>/tripMapInfo?tripId="+id, "行程历史地图", 800, 800)
	}

	function openwindow(url,name,iWidth,iHeight)  
	{  
	// url 转向网页的地址  
	// name 网页名称，可为空  
	// iWidth 弹出窗口的宽度  
	// iHeight 弹出窗口的高度  
	//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽  
	var iTop = (window.screen.height-30-iHeight)/2; //获得窗口的垂直位置;  
	var iLeft = (window.screen.width-10-iWidth)/2; //获得窗口的水平位置;  
	window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');  
	} 
	
	function load(curr) {

		
		var pageSize =30; //每页出现的数量
	    $.ajax({
	    	url: "<%=path%>/gettripInfoList",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: {
	        	"curr": curr, 
	        	"pageSize": pageSize,
	        	"vehicleLicense":$("#vehicleLicense").val(),
	        	"tripStartDate":$("#startTime").val(),
	        	"tripStopDate":$("#endTime").val()
	        },
	        success: function (data) {
	            var html = "";
	            $.each(data.list, function (i, item) {
	            	var id=item.tripId
	            	 var editid = "";
                     editid += "&nbsp;&nbsp;&nbsp;&nbsp;";
            		 editid= "<a href='javascript:;' class='fa fa-window-maximize' onclick=\"seeTripInfo('" + id + "')\" title='查看' >查看</a>";
            	  
	            	var n = i+1;
	                html += " <tr> " +
		                        " <td>" + n+ "</td> " +
		                        " <td>" + item.vehicleLicense + "</td> " +
		                        " <td>" + item.startPassengerName + "</td> " +
		                        " <td>" + item.tripStartDate + "</td> " +
		                        " <td>" + item.stopPassengerName + "</td> " +
		                        " <td>" + item.tripStopDate + "</td> " +
		                        " <td>" +editid + "</td> " +
	                        " </tr>";
	            })
	            $("#tbody").html(html);
	            laypage({
	                cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
	                pages: Math.ceil(data.totalCount / 30), //通过后台拿到的总页数
	                skin: "#49afcd",
	                curr: curr || 1, //当前页
	                jump: function (obj, first) { //触发分页后的回调
	                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
	                        curr = obj.curr;
	                        load(curr);
	                    }
	                }
	            });

	        }
	    })
	}
</script>
